<template>
	<view class="aiWriting_box">
	    <view class="creative_">
	           <view class="creative_s">
	           	{{writing}}
	           </view>
	    </view>
		<view class="creative_results">
			<view class="creative_resultss">
				<view class="title">
					创作结果
				</view>
				<view class="results_textarea" style="padding: 0 20rpx 20rpx 20rpx;">
					<view
						style="width:100%;color: #606266;font-size: 15px;display:inline-block;white-space: pre-wrap; word-wrap: break-word;height: auto;">
						{{creativeResults}}
					</view>
				</view>
			</view>
			<view style="display: flex;">
				<view class="creative_results_btn" >
				   	     <!--  <image class="btes" src="../../static/icon/5.png" style="width: 50rpx;height: 50rpx;"></image> -->
						   <view class="bts" @click="copyResults">复制结果</view>
						    <view class="bts" style="background:#F89461;" @click="pack">保存结果</view>
						   
				</view>
			</view>
			
		</view>
		
		<view v-if="showCanvas" class="canvasView" :style="{'z-index':showCanvas?'300':'0'}">
			<canvas :style="{'width':canvasWidth+'px', 'height':canvasHeight+'px'}" canvas-id="myCanvas" />
		</view>
		
	</view>
</template>

<script>
	import {
		myShowLoading,
		myHideLoading,
	} from "../../utils/showToast.js";
	import {
		isLogin,
		vipType
	} from '@/business/login.js';
	import {
		wxTextDetection
	} from "../../utils/textCheck.js";
	import {
		wycUrl,
		wycUrlApi
	} from '@/api/assemb.js'
	import store from '../../store/idnex.js'
    import config from "../../uni_modules/uview-ui/libs/config/config.js";
	import {
		apiMixUrlApi
	} from "../../api/assemb";
	var diff = require('diff');
	let app = getApp();
	export default {
		data() {
			return {
				creativeResults:'',
				writing:'',
				lenth:true,
				showCanvas: false,
				canvasHeight: 500,
				canvasWidth: 300,
				isVip: false,
				content: '您还不是会员,此功能需开通会员才可使用。',
				compareResults: [],
				vipShow: false,
				frequency: uni.getStorageSync('frequency'),
				aiLevel: 1,
				originality: 0,
				width: 0,
				arrIndex: [],
				widthIndex: 0,
				schedule: 0,
				scheduleShow: false,
				time:null,
			};
		},
		onShow() {
			// this.isVip = true;
		},
		onLoad(options) {
			console.log(options.creativeResult)
			console.log(options.writing)
			this.creativeResults = options.creativeResult
			this.writing = options.writing
			
			var time = new Date()
			let baseinfopro = uni.getStorageSync('baseinfopro');
			console.log('baseinfopro', baseinfopro)
			this.userid = baseinfopro.userid
		
		},
		methods: {
		     pack() {
		     	let today = new Date();
		     	let month = today.getMonth() + 1;
		     	let currentDate = today.getFullYear() + "-" + month + "-" + today.getDate();
		     	let tooles = {
		     		title: this.creativeResults,
		     		time: currentDate
		     	}
		     	if (uni.getStorageSync('contents')) {
		     		let contents = uni.getStorageSync('contents')
		     		contents.push(tooles)
		     		uni.setStorageSync('contents', contents);
		     		uni.showToast({
		     			title: '保存成功',
		     			icon: "success",
		     			mask: true,
		     			duration: 2000
		     		})
		     		if (uni.getStorageSync('contents').length > 20) {
		     			uni.showModal({
		     				title: '提示',
		     				content: '文案作品最多存储20条',
		     				showCancel: false,
		     				success: function(res) {}
		     			});
		     		}
		     	} else {
		     		uni.showToast({
		     			title: '保存成功,请前往我的页面查看',
		     			icon: "success",
		     			mask: true,
		     			duration: 2000
		     		})
		     		let contents = []
		     		contents.push(tooles)
		     		uni.setStorageSync('contents', contents);
		     	}
		     },
			
		
			//复制结果
			copyResults() {
				uni.setClipboardData({
					data: this.creativeResults,
					showToast: true
				});
			},
			//分享结果
			onShareAppMessage(res) {
				const that = this
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target, 'res.target')
				}
				return {
					title: 'AI写作神器，一键改写变原创。',
					path: "pages/home/home?userid=" + that.userid,
					imageUrl: "../../static/other/share.png",
					success: function(res) {
						console.log(
							"--------------转发成功--------------------",
							res,
							that.userid
						);
					}
				}
			},
			// poster(){
			
			// }
	// async posters() {
	// 	var that = this;
	// 	myShowLoading("正在生成海报");
	// 	let c1 = new wx.cloud.Cloud({
	// 		// 资源方 AppID
	// 		resourceAppid: getApp().globalData.resourceAppid,
	// 		// 资源方环境 ID
	// 		resourceEnv: getApp().globalData.resourceEnv,
	// 	});
	// 		console.log(getApp().globalData.resourceAppid,getApp().globalData.resourceEnv,)
	// 	await c1.init();
	// 	c1.callFunction({
	// 		name: "getUnlimited",
	// 		data: {
	// 			idForPosters: this.userid,
	// 		},
	// 	}).then((res) => {
	// 		const fs = wx.getFileSystemManager();
	// 		const filePath = wx.env.USER_DATA_PATH + "/myercode.png";
	// 		console.log('filePath==>', filePath)
	// 		fs.writeFile({
	// 			// 写文件
	// 			filePath: filePath,
	// 			data: res.result.buffer,
	// 			encoding: "binary", //二进制流文件必须是 binary
	// 			success(res) {
	// 				that.drawImage(filePath);
	// 			},
	// 		});
	// 	});
	// },
			
			drawImage(filePath) {
				var that = this;
				const ctx = wx.createCanvasContext("myCanvas", that);
				// 获取图片信息，要按照原图来绘制，否则图片会变形
				wx.getImageInfo({
						src: "https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/wx_2022_5_25_fxt1683612581221.jpg",
					success: function(res) {
						// 根据 图片的大小 绘制底图 的大小
						console.log(" 绘制底图 的图片信息》》》", res);
						let imgW = res.width / 4.5;
						let imgH = res.height / 4.5;
						let imgPath = res.path;
						that.showCanvas = true
						console.log('1111111111111111')
						that.canvasHeight = imgH
						console.log('2222222222222222')
						that.canvasWidth = imgW
							console.log('33333333333333')
						// 绘制底图 用原图的宽高比绘制
						ctx.drawImage(imgPath, 0, 0, imgW, imgH);
							console.log('444444444444444')
						wx.getImageInfo({
							src: filePath, // 二维码图片的路径
							success: function(res) {
								console.log(" 绘制二维码》》》", res);
								// 绘制二维码
								ctx.drawImage(res.path, (imgW / 2 - 115), (imgH - 135), 100, 100);
								ctx.draw();
								setTimeout(() => {
									wx.canvasToTempFilePath({
											canvasId: "myCanvas",
											success: function(res) {
												console.log(
													"合成的带有小程序码的图片success》》》",
													res);
												let tempFilePath = res
													.tempFilePath;
												//保存到相册
												wx.saveImageToPhotosAlbum({
													filePath: tempFilePath,
													success(res) {
														myHideLoading();
														wx.showModal({
															title: "温馨提示",
															content: "海报保存成功，可在相册中查看并分享",
															showCancel: false,
															success(
																res
															) {
																that.showCanvas =
																	false
																wx
																	.clear;
															},
														});
													},
			
													fail(res) {
														myHideLoading();
														wx.showModal({
															title: "温馨提示",
															content: "图片保存失败，请重试，并授权添加到相册功能",
															showCancel: false,
														});
														that.showCanvas =
															false
														that.authorizationBtn =
															false
													},
												});
												console.log("合成的带有小程序码的图片的信息》》》",
													res);
											},
											fail: function(res) {
												console.log(
													"生成的图拍呢 失败 fail fail fail ",
													res);
												myHideLoading();
												wx.showModal({
													title: "温馨提示",
													content: "小程序码图片合成失败，请重试",
													showCancel: false,
												});
											},
										},
										that
									);
								}, 1500);
							},
						});
					},
					fail(res) {
						myHideLoading();
						wx.showModal({
							title: "温馨提示",
							content: "图片信息获取失败，请重试",
							showCancel: false,
						});
					},
				});
			},
			
			delWriting() {
				this.writing = ''
			},
		}
	}
</script>

<style lang="scss">
	/deep/.u-textarea--disabled {
		background-color: #fff !important;
	}

	/deep/.u-textarea {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/deep/.u-button {
		border-radius: 12rpx !important;
	}

	/deep/.u-icon__icon {
		margin-right: 8rpx !important;
	}

	/deep/.u-checkbox__icon-wrap {
		width: 26rpx !important;
		height: 26rpx !important;
		margin-left: 57rpx;
	}

	/deep/.u-textarea .u-textarea__field {
		line-height: 25px;
	}

	.textarea-placeholder {
		line-height: 30rpx;
	}

	.title {
		line-height: 111rpx;
		margin-left: 268rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		color: #f88193;
	}

	.result_comparison {
		margin-top: 31rpx;
		margin-bottom: 20rpx;
		width: 696rpx;
		background: #FFFFFF;
		border-radius: 18rpx;

		.results_textarea {
			padding: 0 20rpx 20rpx 20rpx;
		}
	}


	.creative_results {
		padding-bottom: 30rpx;
		margin-top: 20rpx;
		width: 696rpx;
		border-radius: 18rpx;
		box-sizing: border-box;
      .creative_resultss{
	   background: #FFFFFF;
	
}
		.creative_results_btn {
		  margin: auto;
		      margin-top: 16px;
		      width: 700rpx;
		      display: flex;
		      height: 50px;
			  justify-content: space-between;
		      border-radius: 7px;
		      align-items: center;
			.bts{
				
				color: white;
				font-size: 30rpx;
				color: white;
				    font-size: 15px;
				    width: 48%;
				    background: red;
				    height: 100%;
				    display: flex;
				    justify-content: center;
				    align-items: center;
					background:#f1445d ;
				
			}
			
			.btes{
					color: white;
			}
		}

	}

	.originality {
		margin-top: 64rpx;

		ul {
			display: flex;

			li {
				display: flex;
				width: 193rpx;
				height: 43rpx;
				font-size: 18rpx;

				.left {
					width: 102rpx;
					height: 43rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 43rpx;
					border-radius: 6rpx 0rpx 0rpx 6rpx;
				}

				.right {
					width: 92rpx;
					height: 43rpx;
					color: #333333;
					text-align: center;
					line-height: 43rpx;
					background-color: #fff;
					border-radius: 0rpx 6rpx 6rpx 0rpx;
				}
			}
		}
	}

	.button {
		margin-top: 62rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;

		.button_left {
			width: 47%;
		}

		.button_right {
			position: relative;
			width: 100%;

			.right_other {
				display: flex;
				align-items: center;
				position: absolute;
				top: -21rpx;
				right: 0;
				width: 154rpx;
				height: 42rpx;
				background: #FF6600;
				border-radius: 21rpx 0rpx 0rpx 21rpx;

				text {
					line-height: 42rpx;
					margin-left: 18rpx;
					font-size: 18rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
				}
			}
		}
	}

	.textarea {
		height: 722rpx;
		padding-top: 15rpx;
	}

	.text {
		font-size: 19rpx;
		font-family: PingFang SC;
		color: #999999;
	}

	.aiWriting_box {
		padding: 0 27rpx;

		.content {
			width: 696rpx;
			height: 822rpx;
			border-radius: 18rpx;
			background-color: #fff;
			margin-top: 20rpx;
		}

		.tools {
			height: 80rpx;
			padding: 0 27rpx;
			display: flex;
			justify-content: space-between;

			.tools_left {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.right {
					margin-left: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.tools_right {
				display: flex;
				align-items: center;
			}
		}
	}
</style>
<style>
	page {
		background-color: #f4f4f4;

	}

	.schedule-page {
		width: 100%;
		height: 100vh;
		position: fixed;
		background-color: rgba(128, 126, 126, 0.8);
		top: 0px;
		left: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 200;
	}

	.schedule-box {
		width: 82%;
		background-color: #fff;
		border-radius: 15rpx;

	}

	.schedule-text {
		text-align: center;
		line-height: 120rpx;
	}

	.schedule {
		width: 100%;
		height: 20rpx;
		margin: 20rpx 0rpx;
	}

	.schedule-number {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #2979ff;
	}

	.lineBox {
		width: 90%;
		display: flex;
		justify-content: space-around;
		margin: 0px auto;
		height: 12rpx;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.lineAnimation {
		height: 100%;
		background-color: #bbb9b9;
	}

	.lineAnimation-children {
		height: 100%;
		transition: all 0.5s;
		background-color: #2979ff;
	}
	.canvasView {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: yellow;
	}
	.creative_{
		width: 700rpx;
		height: auto;
		background: white;
		color: #999999;
		height: 250rpx;
		border-radius: 15rpx;
		}
		.creative_s{
			-webkit-line-clamp: 2;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			padding: 20rpx 20rpx 0rpx 20rpx;
			font-size: 28rpx;
		}
</style>